import { Component } from 'react'
import ReactDOM from 'react-dom'

//解决react类组件中注册事件的this问题
/*
  1.把函数调用包裹在箭头函数中
  onClick={() => { this.add() }}
  2.使用bind修改this的指向\
  onClick={this.add.bind(this)}

*/

class App extends Component {
  state = {
    msg: 'Hello',
    count: 10,
    list: ['小明', '小美', '小兰']
  }
  state2 = {
    msg: '你好'
  }
  render() {
    return <div>
      <h1>我是根组件</h1>
      <div>{this.state.msg}</div>
      <div>{this.state2.msg}</div>
      <div>{this.state.count}</div>
      <ul>
        {this.state.list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={() => { this.add() }}>+1</button>
      <button onClick={this.btn}>第二个</button>
      <button onClick={this.btn2}>第三个</button>
      <button onClick={this.addY}>加一个元素</button>
    </div>
  }
  add(e) {
    console.log(this);
  }
  btn = () => {
    this.setState({
      count: this.state.count - 1
    })
  }
  btn2 = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
  addY = () => {
    this.setState({
      list: [...this.state.list, '老六']
      // lsit: this.state.list.push('老六')
    })
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'))